/*
 * @Author: shiguo
 * @Date: 2022-07-12 15:30:19
 * @LastEditors: shiguo
 * @LastEditTime: 2022-07-12 15:33:06
 * @FilePath: /@aks-dev/easyui/lib/DottedLine/DottedLine.tsx
 */
import React from 'react'
import { StyleSheet, View } from 'react-native'
import type { DottedLineProps } from '.'
export default (props: DottedLineProps) => {
    const {
        vertical = false,
        dottedColor,
        dottedCount = 200,
        ...rest
    } = props
    const arrs = Array.from({ length: dottedCount }, (k, v) => v)
    return (
        <View style={{ ...styles.container, flexDirection: vertical ? 'column' : 'row', ...rest.style as any }}>
            {
                arrs.map((item, index) => {
                    return <View
                        key={`dotted-${index}`}
                        style={{
                            ...(vertical ? styles.dotted_vertical : styles.dotted_horizontal),
                            ...(dottedColor && { backgroundColor: dottedColor })
                        }} />
                })
            }
        </View>
    )

}





const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexGrow: 1,
        overflow: 'hidden',
        flexDirection: 'row',
        flexWrap: 'nowrap',
    },

    dotted_horizontal: {
        flexGrow: 0,
        flexShrink: 0,
        width: 2,
        height: 1,
        marginRight: 2,
        backgroundColor: '#cccccc',
    },
    dotted_vertical: {
        flexGrow: 0,
        flexShrink: 0,
        width: 1,
        height: 2,
        marginBottom: 2,
        backgroundColor: '#cccccc',
    }

})